<template>
	<view style="width: 100%;height: 100%;">

	<u-image
		v-if="isPreview"
		:lazy-load="true"
		:showLoading="true"
		:src="img"
		:mode="mode"
		:height="height"
		:width="width"
		:radius="radius"
		@click.stop="previewImage(index)"
		:style="{ width, height }"
	>
	
		<view slot="error" style="font-size: 24rpx;width: 100%;height: 100%;" :style="{ borderRadius:radius,backgroundColor:defaultBgColor }"></view>
	</u-image>
	
	<u-image
		v-if="!isPreview"
		:lazy-load="true"
		:showLoading="true"
		:src="img"
		:mode="mode"
		:height="height"
		:radius="radius"
		:width="width"
		:style="{ width, height }"
	>
	
		<view slot="error" style="font-size: 24rpx;width: 100%;height: 100%;" :style="{ borderRadius:radius,backgroundColor:defaultBgColor }"></view>
	</u-image>

	</view>
</template>

<script>
	export default {
		name:"base-image",
		props: {
		isPreview:{ // 是否可以放大
			type:Boolean,
			default:true,
			required: false
		},
       // 图片地址 可以是一个url  也可以是JSON转String类型的对象列表
        list: {
            type: String,
            default: '',
            required: false
        },
        // 图片压缩方式（可能无效）
		mode: {
			type: String,
			default: 'aspectFill',
			required: false
		},
        width: {
            type: String,
            default: '100%',
            required: false
        },
        height: {
            type: String,
            default: '100%',
            required: false
        },
        // 圆角
        radius: {
            type: String,
            default: '10rpx',
            required: false
        },
        // 当list是JSON转String类型的对象列表，type为对象中的图片字段名称
		type: {
			type: String,
			default: 'url',
			required: false
		}
      },
	  // 加载失败的背景色
	  defaultBgColor:{
	  	type: String,
	  	default: '#DEEAF7',
	  	required: false
	  }
	watch: {
			list: {
				handler() {
					const imageList = this.getFileList(this.list);
					console.log('imageList',imageList)
					// console.log('imageList',typeof imageList)
					if (typeof imageList == 'object' && imageList.length > 0) {
						console.log(111111)
						this.img = imageList[0][this.type].startsWith('http')? imageList[0][this.type] : this.$settings.imgBaseURL + imageList[0][this.type];

						this.imglist = [];
						imageList.forEach(item => {

							this.imglist.push(item[this.type].startsWith('http')? item[this.type] : this.$settings.imgBaseURL + item[this.type]);
						});
					} else {

						this.imglist = [];
						if(typeof imageList == 'string' && imageList){
							this.img =this.list.startsWith('http')? this.list : this.$settings.imgBaseURL +  this.list;
							this.imglist.push(this.img)
						}else{
							this.img = "xxx.jpg"
						}
					}
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				canShow: ['.jpg', '.jpeg', '.png', '.bmp', '.gif', '.JPG', '.JPEG', '.PNG', 'BMP', '.GIF'],
				imglist: [],
				img: ''
			};
		},
		methods: {
			// 处理附件上传
			getFileList(value) {
				let handleFileValue
				try {
					if(typeof value == "object"){

						handleFileValue = value
					}else if(typeof value == "string"){
						handleFileValue = Object.values(JSON.parse(value))
					}
				} catch (e) {
					handleFileValue = value
				}
				return handleFileValue
			},
			previewImage(index = 0) {
				console.log(this.imglist)
				if(this.imglist.length > 0){
					uni.previewImage({
						current: index,
						indicator: 'number',
						loop: true,
						urls: this.imglist
					});
				}

			},
			download(url) {
				uni.downloadFile({
					url, //下载地址接口返回
					success: data => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存', //保存路径
										duration: 3000
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
											}
										});
									}, 3000);
								}
							});
						}
					},
					fail: err => {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载'
						});
					}
				});
			}
		},
	}
</script>

<style>

</style>
